<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>跳转提示</title>
    <link href="/public/static/static/layui/css/layui.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="/public/static/static/layui/layui.js"></script>
    <script src="/public/static/static/circleDonutChart.js"></script>
    <script type="text/javascript">
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.open({
                title:"跳转信息!",
                type: 1,
                offset: '100px',
                shadeClose: true, //点击遮罩关闭
                content: $("#main")
            });
        });
        $(function(){
            var canvas = document.getElementById('canvas'),  //获取canvas元素
                context = canvas.getContext('2d'),  //获取画图环境，指明为2d
                ctx = canvas.getContext('2d');
                ctx.fillStyle="#fff";
                centerX = canvas.width/2,   //Canvas中心点x轴坐标
                centerY = canvas.height/2,  //Canvas中心点y轴坐标
                rad = Math.PI*2/100, //将360度分成100份，那么每一份就是rad度
                speed = 0; //加载的快慢就靠它了
            //绘制蓝色外圈
            function blueCircle(n){
                context.save();
                if(n==100)
                    context.strokeStyle = "#20b82b"; //设置描边样式
                else
                    context.strokeStyle = "#FFB800"; //设置描边样式
                context.lineWidth = 20; //设置线宽
                context.beginPath(); //路径开始
                context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
                context.stroke(); //绘制
                context.closePath(); //路径结束
                context.restore();
            }
            //绘制白色外圈
            function whiteCircle(){
                context.save();
                context.beginPath();
                context.strokeStyle = "white";
                context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
                context.stroke();
                context.closePath();
                context.restore();
            }
            //百分比文字绘制
            function text(n){
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
                context.strokeStyle = "#fff"; //设置描边样式
                context.font = "40px 微软雅黑"; //设置字体大小和字体
                //绘制字体，并且指定位置
                if(n==100)
                    ctx.fillText("ok！", centerX-32, centerY+10);
                else
                    ctx.fillText(n.toFixed(0)+"%", centerX-32, centerY+10);
                context.stroke(); //执行绘制
                context.restore();
            }
            //动画循环
            var time_1;
            var time_2;
            $(function(){
                var setIn=setInterval(function(){
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    whiteCircle();
                    text(speed);
                    blueCircle(speed);
                    if(speed >= 100) {
                        clearInterval(setIn);
                        window.location.href = $("#canvas").attr('href');
                    }
                    speed += 1;
                },$("#canvas").attr('time')*1000/100);
            })
        });
    </script>
    <style type="text/css">
        .center {text-align: center}
        * { margin: 0; padding: 0; }
        body { text-align: center; background-color: #0cc; }
        div{
            background-color: #0cc;
            position: relative;
        }
        p{font-size: 20px;padding-top: 30px}

        @media only screen and (max-width:900px){
            .mkeButton {display:block; margin:8px auto 0;}
        }
        @media only screen and (max-width:767px){
        }
    </style>
</head>
<body>
<div id="main"  style="width:360px;display: none">
    <span class="center"><p class="success" >{$msg}</p></span>
    <canvas id="canvas" width="300" height="300" style="background:#0cc;" time="{$wait}" href="{$url}"></canvas>
</div>

</body>
</html>

